<script setup>
import { ref, reactive } from 'vue'
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';
import { addAddr, modifyAddr, delAddr, setDefaultAddr } from '@/api/user';
import doAddr from './doAddr.js'
import {
      regionData,
      codeToText,
} from "element-china-area-data";


const { addrList: addList } = storeToRefs(useUserStore())


// 弹框
const dialogVisible = ref(false)
function showDia() {
      dialogVisible.value = true
      form = reactive({
            consignee: '',
            phone: '',
            sex: '',
            provinceCode: '',
            provinceName: '',
            cityCode: '',
            cityName: '',
            districtCode: '',
            districtName: '',
            detail: '',
            selectedOptions: []
      })
}
let form = reactive({
      consignee: '',
      phone: '',
      sex: '',
      provinceCode: '',
      provinceName: '',
      cityCode: '',
      cityName: '',
      districtCode: '',
      districtName: '',
      detail: '',
      selectedOptions: []
})
// 选择完地址后
function handleChange(val) {
}
const formRef = ref(undefined)
// 确认
async function submit() {
      await formRef.value.validate()
      doAddr(form, codeToText)

      if (form.id) {
            //这是修改
            await modifyAddr(form)
      } else {
            //这是新增
            form.userId = useUserStore().userInfo?.id
            await addAddr(form)
      }
      useUserStore().getAddrList()
      dialogVisible.value = false
}
//修改收货地址
function update(index) {
      showDia()
      form = addList.value[index]
      form.selectedOptions = [form.provinceCode, form.cityCode, form.districtCode]
}
// 删除收货地址
async function doDel(id) {
      await delAddr(id)
      useUserStore().getAddrList()

}
// 设置默认地址
async function setDefault(it) {
      await setDefaultAddr(it.id)
      useUserStore().getAddrList()

}
</script>

<template>
      <div class="right">
            <h1>收货地址</h1>
            <div class="item">
                  <div class="desc" @click="showDia">
                        <i style="font-style: normal;"></i>
                        <p>添加新地址</p>
                  </div>

            </div>
            <div class="item" v-for="(it, index) in addList" :key="it.id">
                  <h2>{{ it.consignee }}</h2>
                  <span>{{ it.phone }}</span>
                  <p>{{ `${it.provinceName} ${it.cityName} ${it.districtName}` }}</p>
                  <p>{{ it.detail }}</p>
                  <div class="btn">
                        <button @click="setDefault(it)" v-show="it.isDefault !== 1">设为默认</button>
                        <button @click="doDel(it.id)">删除</button>
                        <button @click="update(index)">修改</button>
                  </div>
            </div>
            <!-- 弹框 -->
            <el-dialog v-model="dialogVisible" title="添加收货地址" :show-close="false">
                  <el-form :model="form" ref="formRef">
                        <el-form-item prop="consignee" :rules="{ required: true, message: '内容不能为空' }">
                              <el-input v-model="form.consignee" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item :rules="{ required: true, message: '内容不能为空' }" prop="phone">
                              <el-input v-model="form.phone" placeholder="手机号"></el-input>
                        </el-form-item>
                        <el-form-item :rules="{ required: true, message: '内容不能为空' }" prop="sex">
                              <select v-model="form.sex" class="selector">
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                              </select>
                        </el-form-item>
                        <el-form-item :rules="{ required: true, message: '内容不能为空' }" prop="selectedOptions">
                              <el-cascader @change="handleChange" placeholder="选择省 / 市 / 区" size="large"
                                    :options="regionData" v-model="form.selectedOptions">
                              </el-cascader>
                        </el-form-item>
                        <el-form-item prop="detail" :rules="{ required: true, message: '内容不能为空' }">
                              <el-input placeholder="详细地址" v-model="form.detail"></el-input>
                        </el-form-item>
                        <el-form-item>
                              <div class="btn_group">
                                    <button @click.prevent="submit">确定</button>
                                    <button @click.prevent="dialogVisible = false">取消</button>
                              </div>
                        </el-form-item>
                  </el-form>
            </el-dialog>
      </div>

</template>

<style scoped lang="less">
.right {
      background-color: #fff;
      float: right;
      height: 75%;
      width: 978px;
      padding: 0 40px;
      color: #757575;


      .btn_group {
            width: 100%;
            text-align: center;

            button {
                  padding: 5px 45px;
                  margin-right: 10px;
                  color: #fff;
            }

            :nth-child(1) {
                  background-color: #5ebced;
            }

            :nth-child(2) {
                  background-color: #b0b0b0;
            }
      }

      .selector {
            width: 50px;
      }

      :deep(.el-form-item:nth-of-type(-n+2)) {
            display: inline-block;
            width: 200px;
            margin-right: 5px;
      }

      .item {
            position: relative;
            float: left;
            text-align: center;
            cursor: pointer;
            margin-right: 8px;
            width: 290px;
            height: 178px;
            border: 1px solid #e0e0e0;
            transition: all .3s;

            &:hover {
                  border-color: #b0b0b0;
            }

            &:nth-of-type(1):hover .desc i {
                  // border-color: #b0b0b0;
                  color: black;
            }

            &:nth-of-type(n+2) {
                  padding-top: 48px;

                  &:hover .btn {
                        display: block;
                  }
            }
      }

      .desc {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 59px;

            i::before {
                  content: '\e62a';
                  font-size: 20px;
                  font-family: iconfont;
                  width: 30px;
                  height: 30px;
            }
      }

      .btn {
            display: none;

            button {
                  background-color: #fff;
                  color: #5ebced;
                  margin-right: 3px;
            }
      }
}
</style>
